import type {
  ReactNode,
  MouseEvent,
} from 'react'
import type { GetContainer } from '../../utils/get-container'
import type { NativeProps } from '../../utils/native-props'
import type { PropagationEventType } from '../../utils/with-stop-propagation'

export type MaskProps = {
  /** 完全展示后触发. default: - */
  afterShow?: () => void
  /** 完全关闭后触发. default - */
  afterClose?: () => void
  /** 背景蒙层的颜色. default: `black` */
  // eslint-disable-next-line @typescript-eslint/ban-types
  color?: 'white' | 'black' | (string & {})
  /** 不可见时是否销毁 DOM 结构。default: `false` */
  destroyOnClose?: boolean
  /** 禁用 body 滚动. default: `true` */
  disableBodyScroll?: boolean
  /** 强制渲染内容. default: `false` */
  forceRender?: boolean
  /** 指定挂载的 HTML 节点，如果为 null，会渲染到当前节点. default: `null` */
  getContainer?: GetContainer
  /** 点击蒙层触发. default: - */
  onMaskClick?: (event: MouseEvent) => void
  /** 透明度. default: `default` */
  opacity?: 'default' | 'thin' | 'thick' | number
  /** 阻止某些事件的冒泡. default: ['click'] */
  stopPropagation?: PropagationEventType[]
  /** 是否可见. default: `false` */
  visible?: boolean
  /** children */
  children?: ReactNode
} & NativeProps<
  /** 元素层级. default: 999. globalVariable: --rt-mask-z-index */
  '--z-index'
>
